<template>
  <a-modal :title="modalTitle" :visible="visible" @ok="handleOk" :width="800" @cancel="handleCancel">
    <div class="content">
      <table class="table" border="1">
        <thead>
          <tr>
            <th>会员等级</th>
            <th>等级权益</th>
            <th>会员费用</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in levels" :key="index" :class="{ odd: index % 2 === 1 }">
            <td>{{ item.name }}</td>
            <td>{{ item.benefits }}</td>
            <td>{{ item.price }}元/年</td>
          </tr>
        </tbody>
      </table>

      <p>您可通过以下方式完成升级:</p>
      <ol>
        <li>
          对公账户转账:
          <br />
          收款账户名称: XXXXXXXX, 收款账号号: XXXXXXXXXXXXXX, 开户行: XXXXXXXXX, 转账备注: 用户升级费用。
        </li>
        <li>
          二维码收款:
          <br />
          <img src="~@/assets/background.jpg" alt="QR Code" style="width: 100px; height: 100px;" />
          <img src="~@/assets/bg.jpg" alt="QR Code" style="width: 100px; height: 100px;" />
        </li>
      </ol>

      <div class="line">
        <p>当前等级：{{ user && user.memberLevel }}级</p>
      </div>
      <div class="line">
        升级至：<a-radio-group v-model="memberLevel">
          <a-radio-button v-for="level in levels" :key="level.id" :value="level.id">{{ level.name }}</a-radio-button>
        </a-radio-group>
      </div>
      <div class="line" style="display:flex;">上传附件：<j-upload v-model="imagePath"></j-upload></div>
    </div>
  </a-modal>
</template>

<script>
import { mapState } from 'vuex'
import { axios } from '@/utils/request'

export default {
  props: ['visible', 'legalCode', 'user'],
  data() {
    return {
      imagePath: null,
      modalTitle: '升级会员',
      memberLevel: null,
      uploadUrl: '/api/upload',
      levels: [
        {
          id: 1,
          name: '1级',
          benefits: '不提供投标文件上传加速服务。',
          price: 0,
        },
        {
          id: 2,
          name: '2级',
          benefits: '提供投标文件上传加速服务，每秒中提速100kb/s。',
          price: 200,
        },
        {
          id: 3,
          name: '3级',
          benefits: '提供投标文件上传加速服务，每秒中提速200kb/s。',
          price: 300,
        },
        {
          id: 4,
          name: '4级',
          benefits: '提供投标文件上传加速服务，每秒中提速500kb/s。',
          price: 500,
        },
        {
          id: 5,
          name: '5级',
          benefits: '提供投标文件上传加速服务，每秒中提速1024kb/s。',
          price: 800,
        },
      ],
      currentLevel: '一级', // Set this dynamically based on your application logic
    }
  },
  computed: {
    ...mapState({
      // ... (map state if needed)
    }),
  },
  methods: {
    showModal(title) {
      this.modalTitle = title
      this.visible = true
    },
    handleOk(e) {
      if (!this.memberLevel || !this.imagePath) {
        return this.$message.error('请选择等级和上传附件')
      }

      axios
        .post('/register/subjectMemberLevel/add', {
          legalCode: this.legalCode,
          memberLevel: this.memberLevel,
          imagePath: this.imagePath,
        })
        .then(value => {
          this.$emit('on-ok')
          e.preventDefault()
          console.log('Clicked OK')
          this.handleCancel()
        })
      // Add your logic here to handle the OK button click event.
    },
    handleCancel(e) {
      this.$emit('on-ok')
      console.log('Clicked OK')
      this.memberLevel = null
      this.imagePath = null
      // Add your logic here to handle the OK button click event.
    },
    handleChange(info) {
      if (info.file.status === 'done') {
        console.log('File uploaded successfully.')
      }
    },
  },
}
</script>

<style scoped lang="less">
.line {
  line-height: 3em;
}
.content {
  /* ... (styles for content) */
}
.table {
  /* ... (styles for table) */
}
.content {
  text-align: left;
}

.table {
  margin: auto;
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table th,
.table td {
  padding: 8px;
  border: 1px solid #ddd;
}

/* 行间隔颜色 */
.table .odd {
  background-color: #f2f2f2;
}
</style>
